<template>
  <a-drawer :visible="visible" width="400px" title="表格设置" @close="close">
    <div>可见字段</div>
    <draggable
      v-model="tableColumns"
      group="people"
      @start="drag = true"
      @end="drag = false"
    >
      <div
        v-for="(item, index) in tableColumns"
        :key="item.dataIndex"
        style="cursor: pointer"
      >
        {{ index + 1 }}. {{ item.title
        }}<a-button type="link" @click="deleteItem(index, item)">
          删除
        </a-button>
      </div>
    </draggable>
    <div>
      <div style="margin-top: 30px">可添加字段</div>
      <ul>
        <li v-for="(item, index) in hasDeleteColumns" :key="item.key">
          {{ index + 1 }}. {{ item.title }}
          <a-button type="link" @click="add(item, index)"> 添加 </a-button>
        </li>
      </ul>
    </div>
    <a-space style="margin-top: 30px">
      <a-button type="primary" @click="submit"> 保存 </a-button>
      <a-button @click="reset"> 重置 </a-button>
    </a-space>
  </a-drawer>
</template>
<script>
import { cloneDeep } from 'lodash'
import draggable from 'vuedraggable'
export default {
  name: 'TableSetting',
  components: {
    draggable
  },
  props: {
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    tableName: {
      type: String,
      default: 'defaultColumns'
    }
  },
  data() {
    return {
      tableColumns: [],
      hasDeleteColumns: [],
      drag: false
    }
  },
  mounted() {
    this.initColumn()
  },
  methods: {
    initColumn() {
      const lang = localStorage.getItem('lang') === 'en-GB' ? 'en' : ''
      const datas = JSON.parse(localStorage.getItem(`${this.tableName}${lang}`))
      console.log('datas', datas)
      console.log(this.hasDeleteColumns)
      if (datas?.length >= 0) {
        this.columns.forEach(column => {
          if (!datas.includes(column.title)) {
            this.hasDeleteColumns.push({
              title: column.title,
              dataIndex: column.dataIndex
            })
          }
        })
        this.tableColumns = datas.map(item => {
          return { title: item, dataIndex: item }
        })
      } else if (!datas) {
        const columns = this.columns?.map(item => {
          return { title: item.title, dataIndex: item.dataIndex }
        })
        this.tableColumns = columns
      }
    },
    deleteItem(index, item) {
      this.tableColumns.splice(index, 1)
      this.hasDeleteColumns.push(item)
    },
    add(item, index) {
      this.hasDeleteColumns.splice(index, 1)
      this.tableColumns.push(item)
    },
    submit() {
      const columns = cloneDeep(this.tableColumns)
      const storage = []
      for (const item of columns) {
        storage.push(item.title)
      }
      const lang = localStorage.getItem('lang') === 'en-GB' ? 'en' : ''
      localStorage.setItem(`${this.tableName}${lang}`, JSON.stringify(storage))
      this.hasDeleteColumns = []
      this.initColumn()
      this.$emit('close')
      this.$emit('reload')
    },
    reset() {
      const lang = localStorage.getItem('lang') === 'en-GB' ? 'en' : ''
      localStorage.removeItem(`${this.tableName}${lang}`)
      this.initColumn()
      this.$emit('reload')
      this.$emit('close')
    },
    close() {
      this.hasDeleteColumns = []
      this.initColumn()
      this.$emit('close')
      this.$emit('reload')
    }
  }
}
</script>
